<template>
  <div id="pie_chart" class="yl-chart-container"></div>
</template>

<script>
import { Pie } from '@antv/g2plot'
export default {
  data () {
    return {
      data: [
        {
          type: '分类一',
          value: 27
        },
        {
          type: '分类二',
          value: 25
        },
        {
          type: '分类三',
          value: 18
        },
        {
          type: '分类四',
          value: 15
        },
        {
          type: '分类五',
          value: 10
        },
        {
          type: '其它',
          value: 5
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.createPieChart()
    })
  },

  methods: {
    createPieChart () {
      const piePlot = new Pie(document.getElementById('pie_chart'), {
        forceFit: true,
        title: {
          visible: true,
          text: '饼图标题'
        },
        description: {
          visible: true,
          text: '介绍'
        },
        radius: 0.8,
        data: this.data,
        angleField: 'value',
        colorField: 'type',
        label: {
          visible: true,
          type: 'spider'
        }
      })

      piePlot.render()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
